<template>
  <div>
    <a-modal
      v-model:visible="props.show"
      :title="props.member ? '编辑' : '新增'"
      @cancel="onCancel"
    >
      <a-form
        ref="formRef"
        :model="formMember"
        name="basic"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
        autocomplete="off"
      >
        <a-form-item
          label="姓名"
          name="name"
          :rules="[{ required: true, message: '请输入姓名' }]"
        >
          <a-input v-model:value="formMember.name" />
        </a-form-item>

        <a-form-item
          label="性别"
          name="sex"
          :rules="[{ required: true, message: '请选择性别' }]"
        >
          <a-radio-group v-model:value="formMember.sex">
            <a-radio value="MAN">男</a-radio>
            <a-radio value="WOMAN">女</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          label="价格"
          name="prize"
          :rules="[{ required: true, message: '请输入价格' }]"
        >
          <a-input v-model:value="formMember.prize" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button key="back" @click="onCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="onConfirm">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, defineProps } from "vue";
import { ITable } from "@/type/Table";
import { FormInstance, message } from "ant-design-vue";
const props = defineProps<{
  show: boolean;
  member?: ITable;
}>();
const emit = defineEmits<{
  (e: "onToggleEdit"): void;
}>();
const formMember = ref<ITable>({
  name: "",
  age: 0,
  sex: "",
  prize: 0,
  username: "",
  addr: "",
  date: "",
  provience: "",
  city: "",
  eMail: "",
});
const formRef = ref<FormInstance>();
const onConfirm = () => {
  formRef
    .value!.validateFields()
    .then((res) => {
      message.success(`模拟新增或更改数据`);
      emit("onToggleEdit");
    })
    .catch((res) => {});
};
const onCancel = () => {
  emit("onToggleEdit");
};
watch(props, (n, o) => {
  if (props.member) {
    formMember.value = {
      ...formMember.value,
      name: props.member.name,
      sex: props.member.sex,
      prize: props.member.prize,
    };
  }
});
</script>
<style lang="less" rel="stylesheet/less" scoped></style>
